<template>
	<view class="medication ph-40 pv-20 pb-136">
		<Navigation title="用药自查" background="#fff" />

		<u-search placeholder="输入疾病/药品名，查询对应信息" bgColor="#F4F4F4" height="36" :showAction="false" searchIconColor="#CCCCCC"
			placeholderColor="#CCCCCC" :clearabled="false" disabled @click="toSearch"></u-search>
		<image
			:src="getBaseUrl() + '/admin-api/system/file/19/get/af8011a49d7543c6b7b2437a55a40740cc15109dd8e14d47748234ce2c10dbb4.png'"
			class="w-670 h-208 mt-40" @click="toDis"></image>
		<view class="f ai-c mt-46 mb-25">
			<image src="http://cwht.ricecs.cn/app/index/sigh.png" class="w-32 h-32 mr-12"></image>
			<view class="fs-32 fw-500 text-color4">宠物慎用药</view>
		</view>
		<view class="f fc-w">
			<view class="w-212 h-84 b-12 mr-16 box mb-16 fs-28 fw-500 text-color2 f ai-c jc-c"
				v-for="(item, index) in cautionList" :key="index" @click="toMedicationDetail(item)">{{ item.medicineName }}
			</view>
		</view>
		<view class="f ai-c mt-46 mb-25">
			<image src="http://cwht.ricecs.cn/app/index/close-black.png" class="w-32 h-32 mr-12"></image>
			<view class="fs-32 fw-500 text-color4">宠物禁用药</view>
		</view>
		<view class="f fc-w">
			<view class="w-212 h-84 b-12 mr-16 box mb-16 fs-28 fw-500 text-color2 f ai-c jc-c"
				v-for="(item, index) in disableList" :key="index" @click="toMedicationDetail(item)">{{ item.medicineName }}
			</view>
		</view>
		<view class="f jc-c fs-24 text-color3 mt-16" @click="navTo">使用过程中如有任何建议或意见，<view class="text-color">欢迎反馈>></view>
		</view>
		<view class="bot w-f ph-40 pv-20">
			<view class="w-f h-96 b-96 f ai-c jc-c btn" @click='toDocotr'>
				<image src="http://cwht.ricecs.cn/app/index/ask.png" class="w-32 h-32 mr-12"></image>
				<view class="fs-32 fw-600 text-color5">咨询医生</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { medicineSimpleQuery } from '@/services/api/index/index';
	import { getBaseUrl } from '@/utils/env';
	//0: 慎用
	const cautionList = ref([]);
	//1: 禁用
	const disableList = ref([]);
	onShow(() => {
		getList();
	});
	function getList() {
		medicineSimpleQuery({ status: 0 }).then((res : any) => {
			cautionList.value = res.data;
		});
		medicineSimpleQuery({ status: 1 }).then((res : any) => {
			disableList.value = res.data;
		});
	}
	const toSearch = () => {
		uni.navigateTo({ url: '/pages_index/medicationSearch' });
	};
	const toMedicationDetail = (data : any) => {
		uni.navigateTo({ url: `/pages_index/medicationDetail?id=${data.id}` });
	};
	function navTo() {
		uni.navigateTo({
			url: '/pages_mine/complaint'
		})
	}
	function toDocotr() {
		uni.navigateTo({
			url: '/pages_index/doctor'
		})
	}
	function toDis() {
		uni.navigateTo({
			url: '/pages_index/disease'
		})
	}
</script>
<style lang="scss" scoped>
	.medication {
		.bot {
			position: fixed;
			left: 0;
			bottom: 0;
			border-top: 1px solid #f5f5f5;

			.btn {
				background: #fabb3d;
			}
		}

		.box {
			background: #f8f8f8;
		}

		.box:nth-child(3n) {
			margin-right: 0;
		}

		::v-deep .u-search__content {
			border-radius: 16rpx !important;
		}
	}
</style>